<template>
  <div id="background">
    <el-container>
      <el-header id="examanswerHead">
        <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
          <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
            <img v-bind:src="backIcon" class="backSize" @click="back"/>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol">
            <span class="titleSize">答案解析</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main id="examanswerMain">
            <el-card class="examCard">
              <el-row class="ceshiType">
                <el-col>
                  {{currentTiMuInfo.type}}
                </el-col>
              </el-row>
              <div v-if="currentTiMuInfo.type=='单选'">

                <el-row style="margin-bottom:10px">
                  <span class="examWords">{{currentTiMuInfo.num}}.{{tiMuInfo.questionText}}</span>
                </el-row>
                <van-radio-group v-model="radio">
                  <van-radio name="A" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>{{tiMuInfo.optionCode[0]}}.{{tiMuInfo.optionText[0]}}</span>
                  </van-radio>
                  <van-radio name="B" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>{{tiMuInfo.optionCode[1]}}.{{tiMuInfo.optionText[1]}}</span>
                  </van-radio>
                  <van-radio name="C" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>{{tiMuInfo.optionCode[2]}}.{{tiMuInfo.optionText[2]}}</span>
                  </van-radio>
                  <van-radio name="D" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>{{tiMuInfo.optionCode[3]}}.{{tiMuInfo.optionText[3]}}</span>
                  </van-radio>
                </van-radio-group>

              </div>
              <div v-if="currentTiMuInfo.type=='判断'">
                <el-row style="margin-bottom:10px">
                  <span class="examWords">{{currentTiMuInfo.num}}.{{tiMuInfo.questionText}}</span>
                </el-row>
                <van-radio-group v-model="panDuan" >
                  <van-radio name=true checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>对</span>
                  </van-radio>
                  <van-radio name=false checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>错</span>
                  </van-radio>
                </van-radio-group>
              </div>
              <div v-if="currentTiMuInfo.type=='多选'">
                <el-row style="margin-bottom:10px">
                  <span class="examWords">{{currentTiMuInfo.num}}.{{tiMuInfo.questionText}}</span>
                </el-row>
                <van-checkbox-group v-model="checkBoxs">
                  <van-checkbox  name="A" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>{{tiMuInfo.optionCode[0]}}.{{tiMuInfo.optionText[0]}}</span>
                  </van-checkbox>
                  <van-checkbox  name="B" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>{{tiMuInfo.optionCode[1]}}.{{tiMuInfo.optionText[1]}}</span>
                  </van-checkbox>
                  <van-checkbox  name="C" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>{{tiMuInfo.optionCode[2]}}.{{tiMuInfo.optionText[2]}}</span>
                  </van-checkbox>
                  <van-checkbox  name="D" checked-color="#53cdf5"  class="overCss" style="margin-bottom:5px">
                    <span>{{tiMuInfo.optionCode[3]}}.{{tiMuInfo.optionText[3]}}</span>
                  </van-checkbox>
                </van-checkbox-group>
              </div>
            </el-card>
        <div style="margin:30px">
          <el-row>
              <span v-show="currentTiMuInfo.answer" style="color:#52d36f;font-size:14px">√正确</span>
              <span v-show="!currentTiMuInfo.answer" style="color:#f06560;font-size:14px">×错误</span>
          </el-row>
          <div>
            <el-row>
              <span class="words" style="font-size:14px">解析</span>
            </el-row>
            <el-row>
              <span class="words" style="font-size:14px">正确答案：{{answerInfo.answer}}</span>
            </el-row>
            <el-row class="words" style="font-size:14px">
              <span>答案解析：{{answerInfo.analysis}}</span>
            </el-row>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import backIcon from '../../../assets/img/mine/geRenZhongXin/back.png'
  import { Toast } from 'vant';
  export default {
    data(){
      return{
        backIcon:backIcon,
        //绑定当前题目的类型和下标
        currentTiMuInfo:{
          //绑定当前题目在该题型下的下标
          index:0,
          type:'',
          //题号
          num:0,
          answer:'',
          useranswer:'',
        },
        radio:'',
        checkboxs:'',
        panDuan:'',
        //绑定当前题目信息
        tiMuInfo:{
          questionScore:0,
          optionCode:[],
          optionText:[],
          questionText:''
        },
        //绑定答案信息
        answerInfo:{
          answer:'',
          analysis:'暂无',
        }
      }
    },
    mounted() {
      this.currentTiMuInfo.index=this.$route.query.index;
      this.currentTiMuInfo.type=this.$route.query.type;
      this.currentTiMuInfo.num=parseInt(this.currentTiMuInfo.index)+parseInt(1);
      this.currentTiMuInfo.answer=this.$route.query.answer;
      this.currentTiMuInfo.useranswer=this.$route.query.useranswer;
      console.log(this.currentTiMuInfo);
      this.getExamTiMu(this.currentTiMuInfo.index,this.currentTiMuInfo.type);
      this.getExamanswer(this.currentTiMuInfo.index,this.currentTiMuInfo.type);
      this.judgeMoRen(this.currentTiMuInfo.useranswer,this.currentTiMuInfo.type);

      var normalHeight=document.documentElement.clientHeight;
      var bg = document.getElementById("background");
      // normalHeight=document.documentElement.clientHeight;
      console.log("height:"+normalHeight);
      bg.style.height = normalHeight+"px";
      bg.style.backgroundColor = "#FFFFFF"
      bg.style.margin = "0px";

      var head=document.getElementById("examanswerHead");
      var headHeight=normalHeight/30 *4 ;
      console.log("headHeight:"+headHeight);
      head.style.height=headHeight+"px";

      var main=document.getElementById("examanswerMain");
      var mainHeight=normalHeight/30 *26 ;
      console.log("mainHeight:"+mainHeight);
      main.style.height=mainHeight+"px";
    },
    methods:{
      back(){
        console.log("back:");
        this.$router.go(-1);
      },
      //根据下标和题型获取题目信息
      getExamTiMu(index,type){
        var URL=this.IP.IP+'/test/testQuestion';
        console.log(URL);
        this.$ajax({
          method:'get',
          url:URL,
          params:{
            index:index,
            questionType:type
          }
        }).then(response=>{
          console.log(response.data);
          var code=response.data.code;
          if(code===0){
            this.tiMuInfo=response.data.data;
          }else{
            Toast(response.data.msg);
          }
        }).catch(error=>{
          console.log(error);
          //Toast(error);
        })
      },
      //根据下标和题型获取正确答案
      getExamanswer(index,type){
        var URL=this.IP.IP+'/test/theCorrectAnswerOfTheQuestion';
        console.log(URL);
        this.$ajax({
          method:'get',
          url:URL,
          params:{
            index:index,
            questionType:type
          }
        }).then(response=>{
          console.log(response.data);
          var code=response.data.code;
          if(code===0){
            this.answerInfo.answer=response.data.data.answer;
            this.answerInfo.analysis=response.data.data.analysis;
            console.log(this.answerInfo);
          }else{
            Toast(response.data.msg);
          }
        }).catch(error=>{
          console.log(error);
          //Toast(error);
        })
      },
      //根据用户的答案绑定默认的选项
      judgeMoRen(useranswer,type){
          if(type==='单选'){
            this.radio=useranswer;
          }else if(type==='判断'){
            this.panDuan=useranswer;
          }else{
            this.checkboxs=useranswer;
          }
      }
    }
  }
</script>
<style>
  .examCard{
    margin: 30px;
  }
  .el-main,.el-header,.el-footer,.el-aside{
    padding: 0px;
  }
  #examanswerHead{
    background-color: #53cdf5;
    color: #707070;
  }
  .imgCol{
    display:flex;
    align-items:center;
    justify-content:center
  }
  .words{
    color: #707070;
  }
  .backSize{
    height: 26px;
  }
  .titleSize{
    font-size:1.125em;
    color:#ffffff
  }
  @media screen and (max-height: 600px){
    .backSize{
      height: 22px;
    }
    .titleSize{
      font-size: 1em;
    }
  }
</style>
